<template>
  <el-drawer v-model="dialogVisible" title="推送商品" direction="rtl" size="60%">
    <!-- 列表 -->
    <ContentWrap>
      <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
        <el-table-column align="center" label="商品编码" prop="no" width="160" />
        <el-table-column align="center" label="商品名称" prop="name" />
        <el-table-column align="center" label="价格(元)" prop="supplyPrice" />
        <el-table-column
          :show-overflow-tooltip="false"
          align="center"
          fixed="right"
          label="操作"
          width="200px"
        >
          <template #default="scope">
            <div class="flex items-center justify-center">
              <el-button link type="primary" @click="openDetail(scope.row.id)">详情</el-button>
              <el-button
                link
                type="danger"
                @click="handlePush(scope.row)"
                v-hasPermi="['system:user:delete']"
              >
                推送
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <Pagination
        v-model:limit="queryParams.pageSize"
        v-model:page="queryParams.pageNo"
        :total="total"
        @pagination="getList"
      />
    </ContentWrap>
  </el-drawer>

  <!-- 详情弹窗：查看 -->
  <Detail ref="formRefDetail" />
</template>

<script lang="ts" setup>
import {
  TUITranslateService,
  TUIStore,
  StoreName,
  IConversationModel,
  SendMessageParams,
  TUIChatService
} from '@tencentcloud/chat-uikit-engine'
import { isEnabledMessageReadReceiptGlobal } from '../../utils/utils'
import * as MatchmakerProductInfoApi from '@/api/blind/maker/matchmakerProductInfo/index.ts'
import * as MemMessageApi from '@/api/blind/memMessage'
import Detail from '@/views/blind/matchmakerProduct/Detail.vue'
import { TUIChatEngine } from '@/TUIKit'

defineOptions({ name: 'MemberUser' })

const dialogVisible = ref(false) // 弹窗的是否展示

const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  name: null
})

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await MatchmakerProductInfoApi.getMatchmakerProductInfoPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

// TIM 相关
const currentConversation = ref<IConversationModel>()

TUIStore.watch(StoreName.CONV, {
  currentConversation: (conversation: IConversationModel) => {
    currentConversation.value = conversation
  }
})

// 推送
const handlePush = (data: any) => {
  console.log(data)
  const { name, productIntroduct, supplyPrice, id, matchmakerCover } = data

  const options = {
    to:
      currentConversation?.value?.groupProfile?.groupID ||
      currentConversation?.value?.userProfile?.userID,
    conversationType: currentConversation?.value?.type,
    payload: {
      data: JSON.stringify({
        // 推荐用户消息标识字段 id
        businessID: 'order',
        // 消息内容
        title: name,
        description: '',
        price: supplyPrice,
        id,
        imageUrl: matchmakerCover
      }),
      description: '',
      extension: ''
    },
    needReadReceipt: isEnabledMessageReadReceiptGlobal()
  } as SendMessageParams

  // 发送消息
  TUIChatService.sendCustomMessage(options)

  // 提交后关闭 dialog
  dialogVisible.value = false

  // DC：记录聊天信息
  const CustomconversationID = ref()
  TUIStore.watch(StoreName.CUSTOM, {
    CustomconversationID: (id: string) => {
      CustomconversationID.value = id
    }
  })
  const IMUserId = TUIChatEngine.userID
  const queryParams = {
    conversationID: `C2C${options.to}`,
    recordId: CustomconversationID.value,
    sendMemId: IMUserId,
    reciveMemId: options.to,
    messageType: 'TIMCustomElem',
    messageContent: options.payload.data
  }

  MemMessageApi.MemMessageCreate(queryParams)
}

/** 打开详情 */
const formRefDetail = ref()
const openDetail = (id?: number) => {
  formRefDetail.value.open(id)
}

/** 打开弹窗 */
const open = async (id: number) => {
  dialogVisible.value = true
  getList()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹
</script>
